<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="'View '+${product.name}">$Title$</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="../css/aboveTool.css" type="text/css" media="screen"/>
    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<body>
<div th:replace="common/IncludeTop::header"></div>
<div id="Content">
    <div id="BackLink">
        <a th:href="@{'/catalog/viewProduct?productId='+${product.productId}}"
           th:text="'Return to '+${product.productId}">Return to ${sessionScope.product.productId}</a>
    </div>
    </br>
    <div id="Catalog">
        <div>
            <script type="text/javascript">
                $(document).ready(function(){
                    $("#Catalog").hide().fadeIn();
                });
            </script>
        </div>
        <table>
            <tr>
                <td th:utext="${product.description}" >
                    ${sessionScope.product.description}
                </td>
            </tr>
            <tr>
                <td>
                    <b th:text="${item.itemId}">
                        ${sessionScope.item.itemId}
                    </b>
                </td>
            </tr>
            <tr>
                <td>
                    <b>
                        <font size="4" th:text="
                         (${item.attribute1}?${item.attribute1}:'')+' '+
                         (${item.attribute2}?${item.attribute2}:'')+' '+
                         (${item.attribute3}?${item.attribute3}:'')+' '+
                         (${item.attribute4}?${item.attribute4}:'')+' '+
                         (${item.attribute5}?${item.attribute5}:'')+' '+
                         ${product.name}">
                            ${sessionScope.item.attribute1} ${sessionScope.item.attribute2}
                            ${sessionScope.item.attribute3} ${sessionScope.item.attribute4}
                            ${sessionScope.item.attribute5} ${sessionScope.product.name}
                        </font>
                    </b>
                </td>
            </tr>
            <tr>
                <td th:text="${product.name}">${sessionScope.product.name}</td>
            </tr>
            <tr>
                <td th:text="${item.quantity} <= 0 ? 'Back ordered.' : ${item.quantity}+' in stock.'"></td>
            </tr>
            <tr>
                <td th:with="number=${item.listPrice}" th:text="'$'+${#numbers.formatDecimal(number, 1, 'COMMA', 2, 'POINT')}">
                    ${item.listPrice}
                </td>
            </tr>

            <tr>
                <td>
                    <a class="Button" th:href="@{/cart/addItemToCart(workingItemId=${item.itemId})}">Add to Cart</a>
                </td>
            </tr>
        </table>
    </div>
</div>
<div th:replace="common/IncludeBottom::footer"></div>
</body>
</html>